<template>
  <div id="articleManage">
    <el-form ref="form" :model="params" :inline="true" label-width="80px">
      <el-form-item label="标题">
        <el-input v-model="params.title"/>
      </el-form-item>
      <el-form-item label="标签">
        <el-input v-model="params.tagName"/>
      </el-form-item>
      <el-form-item label="分类">
        <el-cascader
          v-model="params.typeList"
          :options="typeTree"
          :props="{ multiple: true, checkStrictly: true, emitPath: false }"
          clearable></el-cascader>
      </el-form-item>
      <el-form-item label="修改时间">
        <el-date-picker
          v-model="updateTime"
          type="daterange"
          value-format="yyyy-MM-dd HH:mm:ss"
          unlink-panels
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-button type="primary" size="small" @click="getArticleList()">查询</el-button>
      <el-button type="primary" size="small" @click="edit()">新增文章</el-button>
    </el-form>
    <el-table :data="tableInfo.list" :cell-style="rowClass" :header-cell-class-name="headerName" stripe>
      <el-table-column prop="title" label="标题"/>
      <el-table-column prop="typeList" label="分类">
        <el-breadcrumb slot-scope="scope" separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="type in scope.row.typeList" :key="type.typeId"
                              :to="{ path: '/article/list?typeId=' + type.typeId }">{{ type.typeName }}</el-breadcrumb-item>
        </el-breadcrumb>
      </el-table-column>
      <el-table-column prop="userName" label="姓名"/>
      <el-table-column prop="createTime" label="创作时间">
        <template slot-scope="scope">
          <span>{{ `${fmtDate(scope.row.createTime)}` }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="show(scope.row.id)">查看</el-button>
          <el-button type="primary" size="small" @click="edit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next, sizes, jumper"
      :total="tableInfo.totalNum"
      :current-page.sync="tableInfo.currentPage"
      :page-size="tableInfo.pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
import { getArticleTypeListApi } from '@/api/home/home'
import { getArticleListApi } from '@/api/article-list/article-list'
import { fmtDateToDay } from '@/util/DateUtil'
import { list2tree } from '@/util/ArticleTypeUtil'

export default {
  name: 'articleManage',
  data () {
    return {
      params: {},
      tableInfo: {},
      typeTree: [],
      updateTime: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一天',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  watch: {
    updateTime: {
      handler: function (val, oldVal) {
        if (val) {
          this.params.updateBeginTime = val[0]
          this.params.updateEndTime = val[1]
        } else {
          this.params.updateBeginTime = null
          this.params.updateEndTime = null
        }
      },
      deep: true
    }
  },
  mounted () {
    this.getArticleList()
    this.getTypeList()
  },
  methods: {
    async getArticleList () {
      let res = await getArticleListApi(this.params, true)
      this.tableInfo = res.data
      console.log(this.tableInfo)
    },
    async getTypeList () {
      let res = await getArticleTypeListApi({}, true)
      this.typeTree = list2tree(res.data)
      console.log(this.typeTree, 'tree')
    },
    fmtDate (date) {
      return fmtDateToDay(date)
    },
    show (id) {
      let routeUrl = this.$router.resolve({
        path: '/article/detail',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    edit (id) {
      let routeUrl = this.$router.resolve({
        path: '/manage/editor',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    handleSizeChange (val) {
      this.params.pageSize = val
      this.getArticleList()
    },
    handleCurrentChange (val) {
      this.params.pageNo = val
      this.getArticleList()
    },
    rowClass () {
      return 'text-align: center;'
    },
    headerName () {
      return 'textCenter'
    }
  }
}
</script>

<style>
.textCenter div {
  text-align: center;
}
</style>
